<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI文书-日常管理-设备管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', sans-serif; background: #f0f2f5; color: #333; min-height: 100vh; padding: 16px; }
        
        .container { background: white; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 1800px; margin: 32px auto; }
        .page-title { font-size: 24px; font-weight: bold; color: #2c3e50; margin-bottom: 24px; }
        
        /* 筛选区域 */
        .filter-section { background: #fafafa; padding: 16px; border-radius: 4px; margin-bottom: 16px; }
        .filter-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }
        .filter-left { display: flex; gap: 16px; align-items: end; }
        .form-group { margin-bottom: 0; }
        .form-label { display: block; margin-bottom: 8px; color: #666; font-size: 14px; }
        .form-input, .form-select { width: 200px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; background: white; }
        
        /* 按钮样式 */
        .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
        .btn-primary { background: #1890ff; color: white; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-reset { background: #f5f5f5; color: #666; border: 1px solid #ddd; }
        .btn-reset:hover { background: #e6f7ff; }
        .btn-success { background: #52c41a; color: white; }
        .btn-success:hover { background: #73d13d; }
        .btn-danger { background: #ff4d4f; color: white; }
        .btn-danger:hover { background: #ff7875; }
        .btn-warning { background: #faad14; color: white; }
        .btn-warning:hover { background: #ffc53d; }
        .btn-group { display: flex; gap: 8px; }
        
        /* 表格样式 */
        .table-container { overflow-x: auto; margin-bottom: 16px; }
        table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e8e8e8; border-radius: 4px; }
        th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
        th { background: #fafafa; font-weight: 500; color: #666; white-space: nowrap; }
        td { background: white; }
        tr:last-child td { border-bottom: none; }
        
        /* 分页样式 */
        .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
        .page-item { padding: 4px 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .page-item.active { background: #1890ff; color: white; border-color: #1890ff; }
        .page-item:hover:not(.active) { background: #f5f5f5; }
        
        /* 弹窗样式 */
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
        .modal-content { background-color: #fefefe; margin: 5% auto; padding: 0; border: none; border-radius: 8px; width: 600px; max-height: 90vh; overflow-y: auto; }
        .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e8e8e8; }
        .modal-title { font-size: 18px; font-weight: 500; color: #333; }
        .close { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; }
        .close:hover { color: #000; }
        .modal-body { padding: 24px; }
        .modal-footer { padding: 16px 24px; border-top: 1px solid #e8e8e8; display: flex; justify-content: flex-end; gap: 12px; }
        
        /* 表单样式 */
        .modal-form { display: flex; flex-direction: column; gap: 16px; }
        .modal-form-group { display: flex; flex-direction: column; gap: 8px; }
        .modal-form-label { font-size: 14px; color: #666; font-weight: 500; }
        .modal-form-input, .modal-form-select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
        .modal-form-input:focus, .modal-form-select:focus { outline: none; border-color: #1890ff; }
        .date-range { display: flex; gap: 8px; align-items: center; }
        .date-range input { width: 180px; }
        
        /* 操作按钮 */
        .action-btn { padding: 4px 8px; margin: 0 2px; font-size: 12px; }
        
        /* 维护记录样式 */
        .maintenance-list { max-height: 300px; overflow-y: auto; }
        .maintenance-item { padding: 12px; border: 1px solid #e8e8e8; border-radius: 4px; margin-bottom: 8px; }
        .maintenance-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
        .maintenance-person { font-weight: 500; color: #1890ff; }
        .maintenance-time { color: #666; font-size: 12px; }
        .maintenance-content { color: #333; line-height: 1.6; }
        
        /* 新增维护记录表单 */
        .add-maintenance-form { background: #f5f5f5; padding: 16px; border-radius: 4px; margin-bottom: 16px; }
        .add-maintenance-form .form-row { display: flex; gap: 16px; margin-bottom: 12px; }
        .add-maintenance-form .form-item { flex: 1; }
        .add-maintenance-form textarea { min-height: 80px; resize: vertical; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">设备管理</h1>
        
        <!-- 筛选区域 -->
        <div class="filter-section">
            <form class="filter-form" id="filterForm" onsubmit="event.preventDefault(); applyFilters();">
                <div class="filter-left">
                    <div class="form-group">
                        <label class="form-label">设备名称</label>
                        <input class="form-input" id="filterDeviceName" placeholder="请输入设备名称">
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" type="submit">查询</button>
                    <button class="btn btn-reset" type="button" onclick="resetFilters()">重置</button>
                    <button class="btn btn-success" type="button" onclick="openAddModal()">新增</button>
                </div>
            </form>
        </div>
        
        <!-- 表格区域 -->
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>设备名称</th>
                        <th>设备唯一性标识</th>
                        <th>设备购入时间</th>
                        <th>设备启用时间</th>
                        <th>设备计量校准有效期</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="dataTbody"></tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination" id="pagination"></div>
    </div>

    <!-- 新增设备弹窗 -->
    <div id="addDeviceModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="deviceModalTitle">新增设备</span>
                <span class="close" onclick="closeDeviceModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="deviceForm">
                    <div class="modal-form-group">
                        <label class="modal-form-label">设备名称 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="deviceName" placeholder="请输入设备名称" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">设备唯一性标识 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="deviceId" placeholder="请输入设备唯一性标识" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">设备购入时间 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="purchaseDate" type="date" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">设备启用时间 <span style="color: red;">*</span></label>
                        <input class="modal-form-input" id="activationDate" type="date" required>
                    </div>
                    <div class="modal-form-group">
                        <label class="modal-form-label">设备计量校准有效期 <span style="color: red;">*</span></label>
                        <div class="date-range">
                            <input class="modal-form-input" id="calibrationStartDate" type="date" required>
                            <span>至</span>
                            <input class="modal-form-input" id="calibrationEndDate" type="date" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-reset" onclick="closeDeviceModal()">取消</button>
                <button class="btn btn-primary" onclick="submitDevice()">确定</button>
            </div>
        </div>
    </div>

    <!-- 使用维护情况弹窗 -->
    <div id="maintenanceModal" class="modal">
        <div class="modal-content" style="width: 800px;">
            <div class="modal-header">
                <span class="modal-title">使用维护情况</span>
                <span class="close" onclick="closeMaintenanceModal()">&times;</span>
            </div>
            <div class="modal-body">
                <!-- 添加维护记录 -->
                <div class="add-maintenance-form">
                    <h4 style="margin-bottom: 16px;">添加维护记录</h4>
                    <form id="maintenanceForm">
                        <div class="form-row">
                            <div class="form-item">
                                <label class="form-label">维护人姓名 <span style="color: red;">*</span></label>
                                <input class="form-input" id="maintainerName" placeholder="请输入维护人姓名" required>
                            </div>
                            <div class="form-item">
                                <label class="form-label">维护时间 <span style="color: red;">*</span></label>
                                <input class="form-input" id="maintenanceTime" type="datetime-local" required>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-item">
                                <label class="form-label">维护内容 <span style="color: red;">*</span></label>
                                <textarea class="form-input" id="maintenanceContent" placeholder="请输入维护内容" required></textarea>
                            </div>
                        </div>
                        <button class="btn btn-success" type="button" onclick="addMaintenanceRecord()">添加记录</button>
                    </form>
                </div>
                
                <!-- 历史维护记录 -->
                <div>
                    <h4 style="margin-bottom: 16px;">历史维护记录</h4>
                    <div class="maintenance-list" id="maintenanceList">
                        <!-- 维护记录将在这里动态生成 -->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="closeMaintenanceModal()">关闭</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const mockData = [
            {
                id: 1, name: '高精度天平', deviceId: 'TB-2023-001', 
                purchaseDate: '2023-01-15', activationDate: '2023-01-20',
                calibrationPeriod: '2023-01-20至2024-01-19', createTime: '2023-01-15 10:30:00'
            },
            {
                id: 2, name: '数字化X光机', deviceId: 'XG-2023-002', 
                purchaseDate: '2023-02-10', activationDate: '2023-02-15',
                calibrationPeriod: '2023-02-15至2024-02-14', createTime: '2023-02-10 14:20:00'
            },
            {
                id: 3, name: '显微镜设备', deviceId: 'XW-2023-003', 
                purchaseDate: '2023-03-05', activationDate: '2023-03-10',
                calibrationPeriod: '2023-03-10至2024-03-09', createTime: '2023-03-05 09:15:00'
            },
            {
                id: 4, name: '色谱分析仪', deviceId: 'SP-2023-004', 
                purchaseDate: '2023-04-20', activationDate: '2023-04-25',
                calibrationPeriod: '2023-04-25至2024-04-24', createTime: '2023-04-20 16:45:00'
            },
            {
                id: 5, name: '质谱检测仪', deviceId: 'ZP-2023-005', 
                purchaseDate: '2023-05-15', activationDate: '2023-05-20',
                calibrationPeriod: '2023-05-20至2024-05-19', createTime: '2023-05-15 11:30:00'
            }
        ];

        // 维护记录数据
        const maintenanceData = {
            1: [
                { maintainer: '张技师', time: '2023-06-15 09:00', content: '定期校准和清洁，检查传感器精度' },
                { maintainer: '李技师', time: '2023-09-15 14:30', content: '更换滤网，调整称重参数' }
            ],
            2: [
                { maintainer: '王技师', time: '2023-07-10 10:00', content: '检查X光管状态，校准图像质量' },
                { maintainer: '赵技师', time: '2023-10-10 15:20', content: '清洁探测器，更新软件版本' }
            ],
            3: [
                { maintainer: '钱技师', time: '2023-08-05 11:30', content: '清洁镜头，调整光路系统' }
            ],
            4: [
                { maintainer: '孙技师', time: '2023-09-20 13:15', content: '更换色谱柱，校准检测参数' }
            ],
            5: [
                { maintainer: '周技师', time: '2023-10-25 16:00', content: '清洁离子源，校准质谱参数' }
            ]
        };

        let filteredData = [...mockData];
        let currentPage = 1;
        const pageSize = 5;
        let currentDeviceId = null;
        let isEditMode = false;

        // 渲染表格
        function renderTable() {
            const tbody = document.getElementById('dataTbody');
            tbody.innerHTML = '';
            
            const start = (currentPage - 1) * pageSize;
            const end = start + pageSize;
            const pageData = filteredData.slice(start, end);

            pageData.forEach((item, index) => {
                tbody.innerHTML += `
                    <tr>
                        <td>${start + index + 1}</td>
                        <td>${item.name}</td>
                        <td>${item.deviceId}</td>
                        <td>${item.purchaseDate}</td>
                        <td>${item.activationDate}</td>
                        <td>${item.calibrationPeriod}</td>
                        <td>${item.createTime}</td>
                        <td>
                            <button class="btn btn-primary action-btn" onclick="editDevice(${item.id})">编辑</button>
                            <button class="btn btn-reset action-btn" onclick="viewDetails(${item.id})">详情</button>
                            <button class="btn btn-danger action-btn" onclick="deleteDevice(${item.id})">删除</button>
                            <button class="btn btn-warning action-btn" onclick="showMaintenance(${item.id})">使用维护情况</button>
                        </td>
                    </tr>
                `;
            });
        }

        // 渲染分页
        function renderPagination() {
            const total = filteredData.length;
            const pageCount = Math.ceil(total / pageSize);
            const container = document.getElementById('pagination');
            container.innerHTML = '';
            
            if (pageCount <= 1) return;

            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.max(1, currentPage - 1)})" ${currentPage === 1 ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>上一页</span>`;
            
            for (let i = 1; i <= pageCount; i++) {
                container.innerHTML += `<span class="page-item ${i === currentPage ? 'active' : ''}" onclick="gotoPage(${i})">${i}</span>`;
            }
            
            container.innerHTML += `<span class="page-item" onclick="gotoPage(${Math.min(pageCount, currentPage + 1)})" ${currentPage === pageCount ? 'style="color:#ccc;cursor:not-allowed;"' : ''}>下一页</span>`;
        }

        // 跳转页面
        function gotoPage(page) {
            const pageCount = Math.ceil(filteredData.length / pageSize);
            if (page < 1 || page > pageCount) return;
            currentPage = page;
            renderTable();
            renderPagination();
        }

        // 应用筛选
        function applyFilters() {
            const deviceName = document.getElementById('filterDeviceName').value.trim();
            
            filteredData = mockData.filter(item => 
                (!deviceName || item.name.includes(deviceName))
            );
            
            currentPage = 1;
            renderTable();
            renderPagination();
        }

        // 重置筛选
        function resetFilters() {
            document.getElementById('filterForm').reset();
            filteredData = [...mockData];
            currentPage = 1;
            renderTable();
            renderPagination();
        }

        // 打开新增/编辑弹窗
        function openAddModal() {
            isEditMode = false;
            currentDeviceId = null;
            document.getElementById('deviceModalTitle').textContent = '新增设备';
            document.getElementById('addDeviceModal').style.display = 'block';
        }

        // 编辑设备
        function editDevice(id) {
            isEditMode = true;
            currentDeviceId = id;
            const device = mockData.find(item => item.id === id);
            if (device) {
                document.getElementById('deviceModalTitle').textContent = '编辑设备';
                document.getElementById('deviceName').value = device.name;
                document.getElementById('deviceId').value = device.deviceId;
                document.getElementById('purchaseDate').value = device.purchaseDate;
                document.getElementById('activationDate').value = device.activationDate;
                
                // 解析校准有效期
                const [startDate, endDate] = device.calibrationPeriod.split('至');
                document.getElementById('calibrationStartDate').value = startDate;
                document.getElementById('calibrationEndDate').value = endDate;
                
                document.getElementById('addDeviceModal').style.display = 'block';
            }
        }

        // 关闭设备弹窗
        function closeDeviceModal() {
            document.getElementById('addDeviceModal').style.display = 'none';
            document.getElementById('deviceForm').reset();
        }

        // 提交设备
        function submitDevice() {
            const form = document.getElementById('deviceForm');
            if (!form.checkValidity()) {
                alert('请填写所有必填项');
                return;
            }

            const deviceName = document.getElementById('deviceName').value;
            const deviceId = document.getElementById('deviceId').value;
            const purchaseDate = document.getElementById('purchaseDate').value;
            const activationDate = document.getElementById('activationDate').value;
            const calibrationStartDate = document.getElementById('calibrationStartDate').value;
            const calibrationEndDate = document.getElementById('calibrationEndDate').value;

            // 验证日期逻辑
            if (new Date(purchaseDate) > new Date(activationDate)) {
                alert('启用时间不能早于购入时间');
                return;
            }

            if (new Date(calibrationStartDate) >= new Date(calibrationEndDate)) {
                alert('校准有效期开始日期必须早于结束日期');
                return;
            }

            if (!isEditMode) {
                // 检查设备标识是否已存在
                if (mockData.some(item => item.deviceId === deviceId)) {
                    alert('设备唯一性标识已存在');
                    return;
                }

                const newDevice = {
                    id: mockData.length + 1,
                    name: deviceName,
                    deviceId: deviceId,
                    purchaseDate: purchaseDate,
                    activationDate: activationDate,
                    calibrationPeriod: `${calibrationStartDate}至${calibrationEndDate}`,
                    createTime: new Date().toLocaleString('zh-CN')
                };

                mockData.push(newDevice);
                alert('设备添加成功');
            } else {
                // 编辑模式
                const device = mockData.find(item => item.id === currentDeviceId);
                if (device) {
                    device.name = deviceName;
                    device.deviceId = deviceId;
                    device.purchaseDate = purchaseDate;
                    device.activationDate = activationDate;
                    device.calibrationPeriod = `${calibrationStartDate}至${calibrationEndDate}`;
                }
                alert('设备修改成功');
            }

            closeDeviceModal();
            applyFilters();
        }

        // 查看详情
        function viewDetails(id) {
            const device = mockData.find(item => item.id === id);
            if (device) {
                alert(`设备详情：\n设备名称：${device.name}\n设备标识：${device.deviceId}\n购入时间：${device.purchaseDate}\n启用时间：${device.activationDate}\n校准有效期：${device.calibrationPeriod}\n创建时间：${device.createTime}`);
            }
        }

        // 删除设备
        function deleteDevice(id) {
            if (confirm('确定要删除此设备吗？')) {
                const index = mockData.findIndex(item => item.id === id);
                if (index !== -1) {
                    mockData.splice(index, 1);
                    // 同时删除相关维护记录
                    delete maintenanceData[id];
                    alert('删除成功');
                    applyFilters();
                }
            }
        }

        // 显示维护情况
        function showMaintenance(id) {
            currentDeviceId = id;
            const device = mockData.find(item => item.id === id);
            if (device) {
                document.querySelector('#maintenanceModal .modal-title').textContent = `${device.name} - 使用维护情况`;
                renderMaintenanceList(id);
                document.getElementById('maintenanceModal').style.display = 'block';
            }
        }

        // 渲染维护记录列表
        function renderMaintenanceList(deviceId) {
            const container = document.getElementById('maintenanceList');
            const records = maintenanceData[deviceId] || [];
            
            if (records.length === 0) {
                container.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无维护记录</div>';
                return;
            }

            container.innerHTML = records.map(record => `
                <div class="maintenance-item">
                    <div class="maintenance-header">
                        <span class="maintenance-person">${record.maintainer}</span>
                        <span class="maintenance-time">${record.time}</span>
                    </div>
                    <div class="maintenance-content">${record.content}</div>
                </div>
            `).join('');
        }

        // 关闭维护弹窗
        function closeMaintenanceModal() {
            document.getElementById('maintenanceModal').style.display = 'none';
            document.getElementById('maintenanceForm').reset();
        }

        // 添加维护记录
        function addMaintenanceRecord() {
            const maintainerName = document.getElementById('maintainerName').value.trim();
            const maintenanceTime = document.getElementById('maintenanceTime').value;
            const maintenanceContent = document.getElementById('maintenanceContent').value.trim();

            if (!maintainerName || !maintenanceTime || !maintenanceContent) {
                alert('请填写所有必填项');
                return;
            }

            if (!maintenanceData[currentDeviceId]) {
                maintenanceData[currentDeviceId] = [];
            }

            const newRecord = {
                maintainer: maintainerName,
                time: new Date(maintenanceTime).toLocaleString('zh-CN'),
                content: maintenanceContent
            };

            maintenanceData[currentDeviceId].unshift(newRecord);
            document.getElementById('maintenanceForm').reset();
            renderMaintenanceList(currentDeviceId);
            alert('维护记录添加成功');
        }

        // 点击弹窗外部关闭
        document.addEventListener('click', function(e) {
            if (e.target === document.getElementById('addDeviceModal')) {
                closeDeviceModal();
            }
            if (e.target === document.getElementById('maintenanceModal')) {
                closeMaintenanceModal();
            }
        });

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            renderTable();
            renderPagination();
        });
    </script>
</body>
</html> 